<extend name="Common@Common:layui_cdn" />
<block name="title">
    <title>编辑微课内容</title>
</block>

<block name="style">
    <style>
        .fl {
            float: left;
        }
        
        .fr {
            float: right;
        }
        
        #editor {
            width: 100%;
            min-height: 300px;
        }
        
        .img-wrap {
            background: #f8f8f8;
            text-align: center;
            width: 200px;
        }
        
        .img-wrap>span,
        .video-fengmian {
            font-size: 60px;
            line-height: 207px;
            color: #eee;
        }
        
        .img-wrap img {
            width: 100%;
            cursor: pointer;
        }
        
        #filelist li {
            border: 1px dashed #ccc;
            padding: 5px 10px 5px 10px;
            font-size: 14px;
            width: 600px;
            margin-bottom: 10px;
        }
        
        #filelist li .fl a {
            line-height: 38px;
            padding: 0 50px 0 10px;
            color: #009688;
            height: 38px;
            display: inline-block;
        }
        
        #filelist li .fl a:hover {
            background: #f8f8f8;
        }
        
        ul.imglist li {
            float: left;
            margin-right: 20px;
        }
        
        ul.imglist li .img-btn {
            margin-top: 5px;
        }
        
        ul.imglist li .img-btn .layui-input-block {
            margin-left: 0;
            margin-bottom: 5px;
        }
        
        ul.imglist li .img-btn .layui-inline {
            margin-right: 0;
            margin-bottom: 0;
        }
        /***********/
        
        .cue {
            color: red;
            font-weight: 600;
            font-size: 18px;
            line-height: 50px;
        }
    </style>
</block>

<block name="main">
    <form class="layui-form layui-form-pane close-dialog" style="padding:20px;" onsubmit="return false;" action="/api/content/edit_work_post" method="post">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">基本内容</li>
                <li>小封面管理</li>
                <li>大封面管理</li>
            </ul>

            <div class="layui-tab-content">
                <!-- 基本内容 -->
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" value="{$info.title}" id="title" required lay-verify="required" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">类型：</label>
                        <div class="layui-input-inline">
                            <php> $s_type = ['新课预习','单元闯关']; </php>
                            <select name="type">
                                <volist name="s_type" id="vo">
                                    <option value="{$vo}" <if condition="$vo eq $info['type']">selected</if>>{$vo}</option>
                                </volist>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">学科：</label>
                        <div class="layui-input-inline">
                            <php> $s_subject = ['科学','数学','语文','英语','美术','音乐','体育']; </php>
                            <select name="subject">
                                <volist name="s_subject" id="vo">
                                    <option value="{$vo}" <if condition="$vo eq $info['subject']">selected</if>>{$vo}</option>
                                </volist>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">教材：</label>
                        <div class="layui-input-inline">
                            <php> $s_version = ["教科版2017","教科版2018","教科版2019","教科版2020","教科版2001","人教版"]; </php>
                            <select name="version">
                                <volist name="s_version" id="vo">
                                    <option value="{$vo}" <if condition="$vo eq $info['version']">selected</if>>{$vo}</option>
                                </volist>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">年级：</label>
                        <div class="layui-input-inline">
                            <php> $s_grade = ["一年级","二年级","三年级","四年级","五年级","六年级"]; </php>
                            <select name="grade">
                                <volist name="s_grade" id="vo">
                                    <option value="{$vo}" <if condition="$vo eq $info['grade']">selected</if>>{$vo}</option>
                                </volist>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">上下册：</label>
                        <div class="layui-input-inline">
                            <php> $s_book = ["上册","下册"]; </php>
                            <select name="book">
                                <volist name="s_book" id="vo">
                                    <option value="{$vo}" <if condition="$vo eq $info['book']">selected</if>>{$vo}</option>
                                </volist>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- 封面管理 -->
                <div class="layui-tab-item">
                    <p class="cue">只可上传图片</p>
                    <div class="layui-form-item">
                        <label class="layui-form-label">封面小图</label>
                        <div class="layui-input-block">
                            <input type="text" id="fengmian_small" name="fengmian_small" style="width:500px;display:inline-block" value="{$info.fengmian_small}" placeholder="请输入封面图地址" class="layui-input">
                            <button type="button" class="layui-btn" id="fengmianupload_small">
							    <i class="layui-icon">&#xe67c;</i>上传图片
							</button>
                            <span style="color: red;">（图片大小不能超过3M）</span>
                        </div>
                        <div style="padding-top:10px;">
                            <div class="img-wrap" id="fengmian_small-box">
                                <span>封面</span>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- 封面管理 -->
                <div class="layui-tab-item">
                    <p class="cue">只可上传图片</p>
                    <div class="layui-form-item">
                        <label class="layui-form-label">封面图</label>
                        <div class="layui-input-block">
                            <input type="text" id="fengmian" name="fengmian" style="width:500px;display:inline-block" value="{$info.fengmian}" placeholder="请输入封面图地址" class="layui-input">
                            <button type="button" class="layui-btn" id="fengmianupload">
                                                <i class="layui-icon">&#xe67c;</i>上传图片
                                            </button>
                            <span style="color: red;">（图片大小不能超过3M）</span>
                        </div>
                        <div style="padding-top:10px;">
                            <div class="img-wrap" id="fengmian-box">
                                <span>封面</span>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="layui-form-item">
                    <input type="hidden" name="id" id="id" value="{$_REQUEST['id']}">
                    <button class="layui-btn" lay-submit="" lay-filter="*">确定</button>
                </div>
            </div>
        </div>
    </form>

</block>

<block name="script">
    <js href="/Public/umeditor/third-party/jquery.min.js" />
    <!-- 配置文件 -->
    <script type="text/javascript" src="/Public/qiniu_ueditor/ueditor.config.js?v=1.0.5"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/Public/qiniu_ueditor/ueditor.all.js?v=1.0.9"></script>
    <js href="/Public/plupload/moxie.js" />
    <js href="/Public/plupload/plupload.dev.js" />
    <js href="/Public/plupload/i18n/zh_CN.js" />
    <js href="/Public/Qiniu/ui.js" />
    <js href="/Public/Qiniu/qiniu.js" />
    <js href="/Public/Qiniu/main.js?v=1.0" />
    <js href="/Public/plupload/jquery.zxfdragsort.js?v=1" />
    <script>
        layui.use(['jquery', 'think', 'element', 'upload', 'laytpl'], function() {
            $ = layui.jquery,
                think = layui.think,
                upload = layui.upload,
                laytpl = layui.laytpl;

            var pid = $('#pid').val();
            var id = $('#id').val();

            // 封面图上传
            upload.render({
                elem: '#fengmianupload_small',
                url: '/api/upload/qiniu_upload_content?type=image',
                accept: 'images',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|jpeg|bmp',
                multiple: true,
                before: function() {
                    ii = layer.msg('上传中...', {
                        icon: 16,
                        time: 10000
                    });
                },
                done: function(ret) {
                    //上传完毕回调
                    if (ret.status == 1) {
                        layer.msg("上传成功", {
                            icon: 1,
                            time: 1500
                        });
                        $('#fengmian_small').val(ret.data.url);
                        $('#fengmian_small-box span').html('<img src="' + ret.data.url + '">');
                        layer.close(ii);
                    } else {
                        layer.alert(ret.info);
                    }
                },
                error: function(ret) {
                    // console.log(ret);
                }
            });

            // 封面图上传
            upload.render({
                elem: '#fengmianupload',
                url: '/api/upload/qiniu_upload_content?type=image',
                accept: 'images',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|jpeg|bmp',
                multiple: true,
                before: function() {
                    ii = layer.msg('上传中...', {
                        icon: 16,
                        time: 10000
                    });
                },
                done: function(ret) {
                    //上传完毕回调
                    if (ret.status == 1) {
                        layer.msg("上传成功", {
                            icon: 1,
                            time: 1500
                        });
                        $('#fengmian').val(ret.data.url);
                        $('#fengmian-box span').html('<img src="' + ret.data.url + '">');
                        layer.close(ii);
                    } else {
                        layer.alert(ret.info);
                    }
                },
                error: function(ret) {
                    // console.log(ret);
                }
            });

            if ($('#fengmian_small').val() != '') {
                change_fengmian_s($('#fengmian_small').val());
            }

            function change_fengmian_s(url) {
                $('#fengmian_small-box span').html('<img src="' + url + '">');
                $('#fengmian_small-box span').unbind('click').click(function() {
                    var $this = $(this);
                    //调用示例
                    layer.photos({
                        photos: '#fengmian_small-box',
                        anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                    });
                });
            }

            if ($('#fengmian').val() != '') {
                change_fengmian($('#fengmian').val());
            }

            function change_fengmian(url) {
                $('#fengmian-box span').html('<img src="' + url + '">');
                $('#fengmian-box span').unbind('click').click(function() {
                    var $this = $(this);
                    //调用示例
                    layer.photos({
                        photos: '#fengmian-box',
                        anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                    });
                });
            }

            // 如果已经该文章已有附件，渲染数据
            // var fileTpl = $('#filelistTpl').html();
            var imgTpl = $('#imglistTpl').html();
            // load_files(id);
            if (id) {
                load_images(id);
            }


            function load_images(id) {
                $.get('/api/content/get_video_images_data?fk_id=' + id, function(ret) {
                    if (ret.status) {
                        // console.log(ret.data);
                        var imghtml = "";
                        for (var i = 0; i < ret.data.data.length; i++) {
                            laytpl(imgTpl).render(ret.data.data[i], function(html) {
                                imghtml += html;
                            });
                        }

                        $('#imglist').html(imghtml);
                        listen_del_img(); //监听删除
                        // listen_img_click(); //监听点击
                    }
                });
            }

            // 监听图片删除
            function listen_del_img() {
                //需要先解除原先绑定的事件，防止重复执行
                $('.del-image').unbind('click').click(function() {
                    var id = $(this).attr('data-id');
                    var ii = layer.confirm("确定删除这张图片吗？", function() {
                        layer.close(ii);
                        $.get('/api/content/del_images/ids/' + id, function(ret) {
                            if (ret.status) {
                                $('#img-box-' + id).remove();
                            } else {
                                layer.alert(ret.info);
                            }
                        });
                    });
                })
            }
        });
    </script>
</block>